<template>
    <el-pagination class="pagination" :layout="layout" :current-page="currentPage" :page-size="pageSize"
        :page-sizes="pageSizes" v-bind="$attrs" @change="change" @size-change="sizeChange"
        @current-change="currentChange" :background="background" :small="small" />
</template>
<script setup>
defineOptions({
    name: "smartPager",
});
defineProps({
    currentPage: {
        type: Number,
        default: 1,
    },
    pageSize: {
        type: Number,
        default: 10,
    },
    pageSizes: {
        type: Array,
        default: () => [10, 20, 30, 50, 100],
    },
    layout: {
        type: String,
        default: "total, sizes, prev, pager, next, jumper",
    },
    background: {
        type: Boolean,
        default: true,
    },
    small: {
        type: Boolean,
        default: true,
    },
});
const emits = defineEmits(["update:currentPage", "update:pageSize", "change"]);

/**
 * page-size 每页显示条目个数改变时触发
 * @param pageSize {Number} 每页显示条目个数
 */
function sizeChange(pageSize) {
    console.log('分页组件pageSize===>',pageSize);
    emits("update:pageSize", pageSize);
}

/**
 * current-page 当前页数改变时触发
 * @param currentPage {Number} 当前页数
 */
function currentChange(currentPage) {
    emits("update:currentPage", currentPage);
}

/**
 * current-page 或 page-size 更改时触发
 */
function change() {
    emits("change",);
}
</script>

<style scoped lang="scss">
.pagination {
    display: flex;
    margin-top: 20px;
}
::v-deep .el-select__wrapper{
    width: 100px !important;
}
</style>